<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane>
        <span slot="label"> 活动签到</span>
        <el-table
          ref="singleTable"
          :border="true"
          :data="list"
          highlight-current-row
          max-height="680"
          show-summary
          style="width: 100%"

        >
          <el-table-column label="序号" sortable type="index" width="50">
          </el-table-column>
          <el-table-column label="活动名称" sortable>
            <template slot-scope="scope">
              <span
                style="color: #00a0e9; cursor: pointer"
                @click="handleGetActivityInfo(scope.row.activityId)"
              >
                {{ scope.row.activityName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="活动内容"
            prop="activityDisc"
            sortable
          ></el-table-column>
          <el-table-column
            label="拟招人数"
            prop="activityRecruitPeople"
            sortable
            width="50"
          ></el-table-column>
          <el-table-column
            label="已招人数"
            prop="activityRecruitedPeople"
            sortable
            width="50"
          ></el-table-column>
          <el-table-column
            label="活动积分"
            prop="activityRecruitedPeople"
            sortable
            width="50"
          ></el-table-column>
          <el-table-column
            :filter-method="filterCharge"
            :filters="[
              { text: '否', value: 0 },
              { text: '是', value: 1 },
            ]"
            label="是否收费"
            prop="activityMoney"
            sortable
            width="100"
          >
            <template slot-scope="scope">
              <!--          直接使用钱数量判断是否收费，也可以使用filter 进行过滤-->
              <span>{{ scope.row.activityMoney | isChargeFree }}</span>
            </template>
          </el-table-column>
          <el-table-column
            filter-placement="bottom-end"
            label="签到"
            prop="activityStatus"
            width="400"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="toSign(scope.row)"

              >
                签到
              </el-button>
              <el-popconfirm
                style="margin-left: 1em"
                title="是否进行签退，签退将代表活动结束"
                @confirm="toSignOut(scope.row)"
              >
                <el-button
                  slot="reference"
                  :disabled="!(scope.row.activityStatus === 2)"
                  size="mini"
                  type="danger"
                >
                  签退
                </el-button>

              </el-popconfirm>
              <el-button
                :disabled="!(scope.row.activityStatus === 2)"
                size="mini"
                style="margin-left: 1em"
                type="success"
                @click="handleShowSignList(scope.row)"
              >
                已签到名单
              </el-button>

            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="currentPage"
          :page-size="currentPageSize"
          :page-sizes="[10, 50, 100, 500, 1000, 99999]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleGetBySizeActivity"
          @current-change="handleGetByNumActivity"
        />
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      :center="true"
      :title="'二维码'"
      :visible.sync="dialog.isShow"
      width="300px"

      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="handleClose"

    >
      <el-image :src="dialog.signImg"></el-image>

      <span slot="footer">
        <el-button
          v-show="dialog.status === 1"
          ref="btn"
          type="primary"
          :disabled="disabledBtn"
          @click="toFinishSign"
        >
          开始签到
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="infoDialog.isShow"
      fullscreen
      title="活动信息"
    >

      <div class="content">

        <el-descriptions>
          <el-descriptions-item v-for="(item,index ) in info_setting"
                                :label="item"
                                :key="item"
                                v-if="options.activityInfo &&
                        !!options.activityInfo[index]"
                                v-show="index !=='jobsetList'
                        &&index !=='activityEnrollList'"
          >
            {{ options.activityInfo[index]|toJsonParse|address }}
          </el-descriptions-item>

          <h2 style="text-align: center">活动岗位信息</h2>
          <el-table
            v-if="!!options.activityInfo"
            :data="jobInfoList"
            height="250"
            style="width: 100%">
            <el-table-column
              header-align="center"
              align="center"
              v-for="(item,index ) in jobList_setting"
              :prop="index"
              :key="item"
              :label="item"
            />
          </el-table>

        </el-descriptions>
        <h2 style="text-align: center">活动岗位信息</h2>

        <el-table
          v-if="!!options.activityInfo"
          :data="jobInfoList"
          height="250"
          style="width: 100%">
          <el-table-column
            header-align="center"
            align="center"
            v-for="(item,index ) in jobList_setting"
            :prop="index"
            :key="item"
            :label="item"
          />
        </el-table>

      </div>
      <!--      <div v-else><span>暂无信息</span></div>-->
      <span slot="footer" align="center" class="dialog-footer">
        <el-button type="primary" style="width: 100%" @click="infoDialog.isShow = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="signListShow"
      title="已签到名单"
    >
      <el-table
        :data="sign_list"
        height="250"

        style="width: 100%">
        <el-table-column
          header-align="center"
          align="center"
          v-for="(item,index ) in signList_setting"
          :prop="index"
          :key="item"
          :label="item"
        />
      </el-table>
      <span slot="footer" align="center" class="dialog-footer">
        <el-button type="success" @click="handleUpdateSignList" plain>刷新数据</el-button>
        <el-button type="danger" plain @click="signListShow=false">取 消 </el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>

import {SHEET_NAME} from '@/utils/publicinfo';

export default {
  components: {},
  data() {
    return {
      list: [],
      total: 0,
      keyword: '',
      articleContentshow: false,
      currentPage: 1,
      currentPageSize: 10,
      disabledBtn: false,
      dialog: {
        isShow: false,
        status: null,
        signImg: '',
        id: null,
        signTime: null,
        isAble: true,
      },
      infoDialog: {
        isShow: false,
        content: null,
      },
      signListShow: false,
      signList: [],
      options: {
        xlsxSheet: [],
        xlsxHeader: SHEET_NAME.ACTIVITY,
        activityInfo: null,
      },
      info_setting: {
        'activityName': '活动名称',

        'communityName': '社团名称',

        'activityAddress': '活动地址',
        'activityAuditStatus': '活动审核状态',
        'activityCreatedate': '活动创建日期',
        'activityDatetime': '活动开始日期',
        'activityDisc': '活动描述',
        'activityEndDatetime': '活动截至日期',
        'activityIsfree': '活动是否免费',
        'activityLength': '活动时长',
        'activityMoney': '活动金额',
        'activityRecruitPeople': '活动招募人员',
        'activityRecruitedPeople': '活动已招募人员',
        'activityType': '活动类型',
        'cover': '封面地址',
        'imagePath': '图片地址',
        'isleave': '是否允许请假',
        'tags': '活动标志',
      },
      jobList_setting: {
        'jobDuty': '岗位职责',
        'jobName': '岗位名称',
        'jobScore': '岗位积分',
        'jobNumber': '岗位预招募人数',
        'remainNumber': '岗位招募人数',
      },
      volunteerList_setting: {
        'activityenrollDatetime': '参与时长',
        'credits': '积分',
        'hours': '时长',
        'jobDuty': '岗位职责',
        'jobName': '岗位名称',
        'jobScore': '岗位积分',
        'volunteerName': '志愿者名称',
      },
      signList_setting: {
        'volunteerAccount': '志愿者账户',
        'volunteerMobile': '联系方式',
        'volunteerName': '志愿者姓名',
        'volunteerNo': '中国志愿者号',
        'volunteerOccupation': '职业',
        'volunteerSchool': '所属学校',
        'volunteerSex': '性别',
        'volunteerSpecialty': '特长',
      },
      tmpActivityId: null,
    };
  },
  mounted() {
    this.handleInit()
  },
  computed: {

    jobInfoList() {
      if (!!this.options.activityInfo) {
        return this.options?.activityInfo['jobsetList']?.map(val => {
          return {
            'jobDuty': val?.jobEntity?.jobDuty,
            'jobName': val?.jobEntity?.jobName,
            'jobScore': val.jobScore,
            'jobNumber': val.jobNumber,
            'remainNumber': val.remainNumber,
          };
        });
      } else {
        return [{}];
      }
    },
    volunteerList() {
      if (!!this.options.activityInfo) {
        return this.options?.activityInfo['activityEnrollList']?.map(val => {
          return {
            'credits': val?.credits,
            'hours': val?.hours,
            'jobDuty': val?.jobEntuty?.jobDuty,
            'jobName': val?.jobEntuty?.jobName,
            'jobScore': val?.jobEntuty?.jobScore,
            'volunteerName': val?.volunteerEntity?.volunteerName,
          };
        });
      } else {
        return [{}];
      }
    },
    sign_list() {
      if (this.signList.length > 0) {
        return this?.signList.map(value => {
          return {
            'townCode': value?.townCode,
            'volunteerAccount': value?.volunteerAccount,
            'volunteerMobile': value?.volunteerMobile,
            'volunteerName': value?.volunteerName,
            'volunteerNo': value?.volunteerNo,
            'volunteerOccupation': value?.volunteerOccupation,
            'volunteerSchool': value?.volunteerSchool,
            'volunteerSex': value?.volunteerSex,
            'volunteerSpecialty': value?.volunteerSpecialty,
          };
        });
      }
    },

  },

  methods: {
    handleInit() {
      this.handleGetByNumActivity(1);

    },
    async handleGetBySizeActivity(size) {
      const pageNum = this.currentPage;
      let pageSize = this.currentPageSize;
      pageSize = size;
      const res = await this.$http.activity_allStatusQAQ({
        pageNum,
        pageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    async handleGetActivityInfo(params) {

      this.articleContentshow = true;
      // console.log(params)
      const res = await this.$http.activityInfo(params);
      if (res.code !== 0) return null;
      console.log(res);

      this.infoDialog.content = res;
      this.infoDialog.isShow = true;
      this.options.activityInfo = res.data;
      // console.log(this.content)
    },
    // 分页查询全部活动
    async handleGetByNumActivity(num) {
      let pageNum = this.currentPage;
      const pageSize = this.currentPageSize;
      pageNum = num;
      const res = await this.$http.activity_allStatusQAQ({
        pageNum,
        pageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    async toFinishSign() {
      const id = this.dialog.id;
      // 生成签到二维码
      // await this.handleSign();
      let params = {
        activityId: id,
      };
      const res = await this.$http.beginActivitySign(params);
      if (res.code !== 0) return this.disabledBtn = false;
      return this.disabledBtn = true;
    },
    async handleSign(id) {

      const res = await this.$http.manager_activitySignInCode({activityId: id});
      if (res.code !== 0) return null;
      this.dialog.signImg = res.data;
      await this.handleInit()
    },

    async handleSignOut(id) {
      this.signShow = true;
      // 获得签到二维码
      const res = await this.$http.manager_activitySignOutCode({activityId: id});
      if (res.code !== 0) return null;
      this.dialog.signImg = res.data;
      await this.handleInit()
    },
    async toSign(info) {
      this.dialog.status = info.activityStatus;
      this.dialog.id = info.activityId;
      this.dialog.signTime = info.serveTime;
      this.dialog.isShow = true;
      await this.handleSign(info.activityId);
    },
    async toSignOut(info) {
      this.dialog.status = info.activityStatus;
      const id = info.activityId;
      this.dialog.signTime = info.serveTime;
      this.dialog.isShow = true;
      await this.handleSignOut(info.activityId);
      //  修改活动状态
      return await this.$http.manager_auditActivity(
        {
          id,
          status: 3,
        },
      );
    },
    filterStatus(value, row) {
      return row.activityStatus === value;
    },
    // 筛选是否收费
    filterCharge(value, row) {
      if (value !== 0) return row.activityMoney !== 0;
      return row.activityMoney === value;
    },
    async handleShowSignList(info) {
      this.signListShow = true;
      const params = {
        activityId: info.activityId,
      };
      this.tmpActivityId = info.activityId;
      await this.handleGetRecordList(params);
    },
    async handleGetRecordList(params) {

      let res = await this.$http.activity_recordList(params);

      console.log(res);
      if (!res.code) return this.signList = res.data;
    },
    async handleUpdateSignList() {
      let {tmpActivityId} = this;
      if (tmpActivityId !== null) {
        await this.handleShowSignList({activityId: tmpActivityId});
      }

    },

    handleClose() {
      this.disabledBtn = false;
    },

  },
};
</script>
